<template>
    <div>
        <div class="searchContent flex flexCenter">
            <van-search
                v-model="keyword"
                shape="round"
                show-action
                background="#4873c1"
                placeholder="请输入搜索关键词"
                @search="goSearch"
                @clear="goSearch"
                class='searchSty'
            >
                <template #action>
                    <div @click="goSearch" class="colorfff">搜索</div>
                </template>
            </van-search>
        </div>
        <van-empty image="search" v-show="ideaInfo.data.length==0" description="暂无数据" style="padding-top:2rem" />
        <!-- <div class="addBtn" @click="goAdd"><img src="../../assets/image/addBtn.png" alt=""></div> -->
        <div class="listContent">
            <van-list
                v-model="loading"
                :finished="finished"
                :finished-text="finishedTxt"
                :immediate-check='false'
                offset=20
                @load="goPullup"
                >
                <div class="whiteBg flex flexBetween alignCenter list relative" v-for="(item,index) in ideaInfo.data" :key="index" :title="item" @click="goLink(item.id)">
                    <div class="tipsap fontSize12 grayBg colorBlue flex alignCenter" :class="{'yellowBg colorfff':item.awards=='金点子','greenBgOther colorfff':item.awards=='建议奖','buleBgOther colorfff':item.awards=='潜力奖'}">
                        <img src="../../assets/image/flag.png" v-show="item.awards=='金点子'||item.awards=='建议奖'||item.awards=='潜力奖'" style="width:0.24rem;margin-right:0.06rem"/>
                        <div>{{item.awards}}</div>
                    </div>
                    <div class="fontbold titleSty" style="width:62%">{{item.docSubject}}</div>
                    <div style="text-align: right">
                        <div class="fontSize13" >{{item.docCreatorName}}</div>
                        <div class="fontSize12 color666 mt5">{{item.docCreateTime}}</div>
                    </div>
                </div>
            </van-list>
        </div>
        <div class="addBtn flex wd100  fontSize16 flexBetween colorfff">
            <div class="sameBtn center whiteBg colorBlue color333 " @click="getList(20)" v-if="self==10">我的</div>
            <!-- <div class="sameBtn center" @click="getList(2)" v-if="self==1">返回全部</div> -->
            <div class="sameBtn activeBtn center"  @click="goAdd">提金点子</div>
        </div>
    </div>
</template>
<script>
import {Toast,Empty} from 'vant';
export default {
  name: "ideaList",
  data() {
      return {// 关联企业微信申请单状态：0.草稿中 1-审批中；2-已通过；3-已驳回；4-已撤销；6-通过后撤销；7-已删除；10-已支付
          keyword:'',
          page:1,
          ideaInfo:{
              data:[]
          },
          loading:true,
          finished:false,
          finishedTxt:'没有更多了',
        // self:2,//1自己 2全部
          self:10//10.首页  20.个人
      }
  },
  created(){
    console.log('created--------')
    this.page=1
    
  },
  mounted(){
    console.log('mounted--------')
    let token=this.GetQueryString('token')
    if(token&&token!==''){
        localStorage.setItem('token',token)
    }
    
    this.getGoldidea()
    // if(this.$route.name=='myIdea'){
    //     this.self=1
    //     document.title='我的金点子'
    // }
    // if(this.$route.name=='ideaList'){
    //     this.self=2
    //     document.title='金点子列表'
    // }
    // this.getGoldidea()
    // console.log('self',this.self)
  },
  activated(){
    this.self=10
     
  },
  methods:{
      getGoldidea(){
        Toast.loading({
            message: '加载中',
            forbidClick: true,
        })
        console.log('this.self',this.self)
        console.log('page------------',this.page)
        let obj={keyword:this.keyword,page:this.page,searchType:+this.self}
        //   let obj={keyword:this.keyword,page:this.page,isSelf:+this.self}//isSelf: 1自己 2全部
        //   this.$apiRequest.getGoldidea(obj).then(res=>{
        this.$apiRequest.getIdeaList(obj).then(res=>{
              console.log('获取金点子',res)
              let list=res.data.data
              this.loading = false
              Toast.clear()
              if(list.length===0){
                  this.page==1?this.ideaInfo.data=[]:''
                  this.page==1?this.finishedTxt='':''
                  this.finished=true
                  return 
              }
              if(this.page==1){
                  this.ideaInfo.data=list
                  this.finishedTxt=''
              }else{
                  this.ideaInfo.data=this.ideaInfo.data.concat(list)
              }
              
          })
      },
      goSearch(){
          this.page=1
          this.finished=false,
          this.getGoldidea()
      },
      goPullup(){//上拉
        this.page++
        this.getGoldidea()
      },
      goLink(id){
          console.log('点击---',id)
          this.$router.push({name:'ideaDetail',query:{id:id}})
      },
      goAdd(){
        this.$router.push({path:'addIdea'})
        //   this.$router.push({path:'addIdea',query:{type:'ideaList'}})
      },
      getList(type){
          this.self=type
          this.$router.push({path:'/myIdea'})
        //   if(type==1){
        //       this.$router.push({path:'/myIdea'})
        //   }
        //   if(type==2){
        //       this.$router.push({path:'/ideaList'})
        //   }
        //   this.page=1//1自己 2全部
        //   this.keyword=''
        //   this.getGoldidea()
      },
      GetQueryString(name){
        var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
        var r = window.location.search.substr(1).match(reg);
        if(r!=null)return  unescape(r[2]); return null;
    }
  },
//   watch:{
//       $route(to,form){
//           console.log('tooooooo',to)
//           console.log('formform',form)
//           let that=this
//           if(to.name=='myIdea'){
//               that.self=1
//               document.title='我的金点子'
//           }else{
//               that.self=2
//               document.title='金点子列表'
//           }
//           that.getGoldidea()
//       }
//   }
}
</script>
<style lang="less" scoped>
@import '@/assets/css/style';
.wrapper{
    // background-color: #eee;
    background-color:rgba(72, 115, 193, 0.1);
    .searchContent{
        position: fixed;
        width: 100%;
        top: 0;
        left: 0;
        z-index: 1;
        .searchSty{
            width: 100%;
            max-width: 768px;
        }
    }
    .listContent{
        padding-top: 1.4rem;
        padding-bottom: 2rem;
        width: 92%;
        margin: 0 auto;
    }
}
.addBtn{
    position: fixed;
    padding: 0 10%;
    // top: 40%;
    // right: 0;
    z-index: 999;
    bottom: 1rem;
    max-width: 7.5rem;
    .sameBtn{
        // background-color:#dce1e9;
        // padding: 0.2rem 1rem;
        border-radius: 0.6rem;
        // border:1px #ddd solid;
        z-index: 99;
        box-shadow: 4px 4px 10px #bbb;
        width: 2.6rem;
        height: 0.9rem;
        line-height: 0.9rem;
        // text-align: center;
    }
    .activeBtn{
        background: linear-gradient(to left top, orange, rgb(238, 255, 0));
    }
}
.list{
    padding: 0.44rem 0.24rem;
    margin-bottom: 0.4rem;
    border-radius: 0.1rem;
    .tipsap{
        position: absolute;
        top: 0;
        left: 0;
        padding: 0.02rem 0.1rem;
        border-radius: 0.1rem 0 0.14rem 0;
    }
    .grayBg{background-color: #eee;}
    .greenBg{background-color: green;}
    .orangeBg{background-color: orange;}
    .titleSty{
        // letter-spacing: 0;
        overflow: hidden;
        display: -webkit-box;
        text-overflow: ellipsis;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }
}
.yellowBg{background-color: #f0dc24 !important;}
.greenBgOther{background-color: #6da768 !important;}
.buleBgOther{background-color: rgba(83, 114, 192,0.6) !important;}
</style>
